<template>
  <div
    ref="ScaleBox"
    class="ScaleBox"
    :style="{
      width: width + 'px',
      height: height + 'px',
      fontSize: fontSize + 'px',
    }"
  >
    <div class="contain" :style="boxStyle">
      <!-- <div class="header rowCC">
        <span class="title">{{ props.title }}</span>
        <slot name="right"></slot>
      </div> -->
      <slot></slot>
    </div>
  </div>
</template>
<script setup>
import util from "@/utils/comentUtil";
import { ref, computed, onMounted } from "vue";
let scale = ref("");
// let width = ref(2560);
// let height = ref(1440);
let width = ref(1920);
let height = ref(1080);
let fontSize = ref((16 * width.value) / 1920);
let ScaleBox = ref(null);
// let bg = import.meta.globEager('./../../assets/image/**/*.png')[
//   './../../assets/image/realTime-monitor/other_bg_ic@2x.png'
// ].default
let bg = "";
// let bg = import.meta.globEager('./../../assets/image/**/*.png')['./../../assets/image/realTime-monitor/bg_ic@2x.png'].default

let boxStyle = computed(() => {
  return {
    background: `url("${bg}") no-repeat`,
    backgroundSize: "contain",
    backgroundPosition: "center",
  };
});
let props = defineProps({
  title: {
    type: String,
    default: "标题",
  },
  scaleRef: {
    type: String,
    default: () => "ScaleBox",
  },
});

onMounted(() => {
  const getScale = () => {
    let wh = window.innerHeight / height.value;
    let ww = window.innerWidth / width.value;
    // console.log(ww < wh ? ww : wh, ww, wh);
    return ww < wh ? ww : wh;
  };

  const setScale = () => {
    if (window.innerHeight == height.value) {
      height.value = height.value;
    } else {
      height.value = height.value;
    }
    scale.value = getScale();
    console.log(22222, scale.value);
    if (ScaleBox.value) {
      ScaleBox.value.style.setProperty("--scale", scale.value);
    }
  };
  setScale();

  window.addEventListener("resize", util.throttle(setScale, 500));

  window.onresize = util.throttle(setScale, 500);
});
</script>

<style lang="scss" scoped>
#ScaleBox {
  --scale: 1;
}
.ScaleBox {
  position: absolute;
  transform: scale(var(--scale)) translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  transform-origin: 0 0;
  left: 50%;
  top: 50%;
  transition: 0.3s;
  z-index: 999;
  // background: #1e1e1e;
  .contain {
    .header {
      //background: red;
      height: 5.625em;
      width: 100%;
      //margin-bottom: 15px;
      .title {
        font-size: 2em;
        font-weight: 700;
        text-align: center;
        color: #00ffff;
        letter-spacing: 0.15em;
        text-shadow: 2px 3px 2px #001214;
      }
    }
  }
}
</style>
